<template>
	<sl-page title=" ">
		<!-- <view slot="top" class="search-input-wrapper">
			<uni-easyinput prefixIcon="search" confirmType="search" maxlength=20 :inputBorder="false"
				v-model="searchValue" :styles="styles" placeholder="搜索我的订单" :placeholderStyle="placeholderStyle">
			</uni-easyinput>
		</view> -->
		<view class="order-tab">
			<OrderHead :flowState="flowState" @onChangeTab:result="handleOrderTabResult"></OrderHead>
		</view>
		<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="orderList" @query="loadPage">
			<view class="page-order">
				<Order ref="order" :listDatas="orderList" @onCancel:result="toast" @onPay:result="onPay"
					@onRefund:result="toast" @onReturn:result="toast" @onReceipt:result="toast" />
			</view>
		</z-paging>
	</sl-page>
</template>

<script>
	import OrderApi from '@/api/order/order.js';
	import Constants from '@/constants';
	import OrderHead from '@/pages/components/order/head/head.vue';
	import Order from '@/pages/components/order/order.vue';
	export default {
		//
		name: 'orderIndex',
		//
		mixins: [Constants],
		//
		components: {
			Order,
			OrderHead,
		},
		//
		data() {
			return {
				options: {},
				query: {},
				//查询框扩展
				styles: {
					// color: '#2979FF',
					// borderColor: '#ff0b17',
				},
				searchValue: '',
				placeholderStyle: 'color:#A6A6A6;font-size:28rpx',
				//订单状态
				flowState: '',
				//
				orderList: [],
				top: '',
			};
		},
		//
		onLoad({
			flowState
		}) {
			this.flowState = this.query.flowState = flowState;
		},
		//
		onShow() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.order-tab').boundingClientRect(data => {
					this.top = this.CustomBar + data.height;
				}).exec();
			});
		},
		//
		methods: {
			//tab切换查询参数
			handleOrderTabResult(flowState) {
				if (flowState !== '全部') {
					this.flowState = this.query.flowState = flowState;
				} else {
					this.flowState = '';
					this.query = {};
				}
				this.$refs.paging.reload();
			},
			//加载订单（个人）
			loadPage: async function() {
				try {
					const res = await OrderApi.page(this.query, this.param);
					console.error('加载订单:', res.obj.data);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【orderIndex:loadPage】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//支付
			onPay(result) {
				this.$app.navTo(this.pages.checkoutPayPage + '?orderId=' + result.id);
			},
			//订单操作提示
			toast(result) {
				if (result.success) {
					this.$app.toast(result.msg + '订单成功');
					this.$refs.paging.reload();
				} else {
					this.$app.toast(result.msg + '订单失败');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-input-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding-top: 2rpx;
		width: 100%;
		padding-left: 20rpx;
		border-radius: 80rpx;
		background-color: #F6F6F6;
	}

	.order-tab {
		background-color: $uni-bg-color;
	}

	.page-order {
		margin: 0rpx 16rpx;
	}
</style>